<template >
  <div class="sideCenterPage">
    <div class="slider-container">
      <!--<span>{{$route.path}}</span>-->
      <div class="menu-list">
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <dl>
              <dt class="title">{{item.title}}</dt>
              <dd class="list">
                <a @click="goTo(val)" tag="li" v-for="(val,index) in item.sliderBarList" active-class="on active"  :key="val.id" append>
                  <p class="page-nav"><a>{{val.name}}</a></p>
                </a>
              </dd>
            </dl>
          </li> 
          </ul>
      </div>
    </div>
  </div> 
</template>
<script>
  export default({
    name: "sliderbar",
    props:{
      list:{
        type:Array,
        default(){
          return [
            {
              title:"",
              sliderBarList:[
                {
                  id:"",
                  name:"",
                  path:""
                }
              ]
            }
          ]
        }
      }
    },
    methods: {
      goTo(item){
        this.$router.push({name:item.path})
      }
    }
  })
</script>
<style lang="scss" scoped>
.slider-container{
  .title{
    text-align: center;
    font-size: 18px;
    color:rgba(255,255,255,0.4) ;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #9d2d1a;
  }
  .list{
    margin-top: 14px;
    li{
      position: relative;
      &.router-link-exact-active{
        background: rgba(0,0,0,0.2);
        &:after{
          position: absolute;
          right: -3px;
          top:0;
          content: '';
          width: 6px;
          height: 100%;
          background: #ffad19;
        }
      }
    }

    p{
      height: 52px;
      line-height: 52px;
      position: relative;
      a{
        display: inline-block;
        padding-left: 30px;
        color: white;
        height: 100%;
        position: relative;
      }
    }

  }
}
  @media screen and (max-width: 1400px){
    .slider-container .title{
      height: 50px;
      line-height: 50px;
    }
    .slider-container .list p{
      height: 46px;
      line-height: 46px;
    }
  }
</style>
